
<template>
  <div class="box1">
    <header>
      <i class="el-icon-arrow-left" @click="$router.push({ path: '/j' })"></i>
      <span>预约列表</span>
      <div class="ddd">
        <i class="el-icon-more"></i>
        <i class="el-icon-remove-outline"></i>
      </div>
    </header>
    <main v-for="item in yyList">
      <div class="box2" @click="$router.push({ path: '/records' })">
        <div class="box3">
          <div>
            <span class="t">
             {{item.date}}
            </span>
          </div>
          <div class="samllBox">
            <span class="l2">{{item.deleted == 0 ?'未完成' :'已完成'}}</span>
          </div>
        </div>
        <div class="box4">
          <div class="tp">
            <img src="https://img0.baidu.com/it/u=1717884291,1618340575&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500"
              width="100" height="80" alt="">
          </div>
          <div class="tp2">
            <li >预约成功</li>
            <li>预约时间: 2023-{{ item.reTime }}  {{item.type}} : 00 - {{item.type + 1}} : 00</li>
            <li class="l1">请您按时接受服务,行程有变请提前一小时取消</li>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return{
      yyList:[]
    }
  },
  methods: {
    resList() {
      axios({
        url: "http://192.168.20.106:8000/api/subscribe/reservation/list",
        params: {
         
        },
        method: "get",
      }).then((res) => {
        console.log(res);
        this.yyList = res.data.data
      });
    },

  },
  mounted(){
    this.resList()
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.t{
  width: 200px;
  font-size: 12px;
  color: #ccc;
}
li {
  list-style: none;
}

header {
  width: 100%;
  height: 55px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
}

.el-icon-arrow-left {
  font-size: 35px;
  color: #000;
  margin-top: 10px;
  line-height: 55px;
  float: left;
}

header span {
  text-align: center;
  line-height: 55px;
  font-size: 18px;
}

main {
  width: 100%;
}

.ddd {
  width: 67px;
  height: 35px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 30px;
}

.el-icon-more,
.el-icon-remove-outline {
  font-size: 20px;
  color: #000;
  line-height: 30px;
  margin: 3px;
  margin-left: 10px;
}

.box1 {
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
}

.box2 {
  width: 100%;
  height: 200px;
  background-color: #fff;
  margin-top: 30px;

}

.box3 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}

.box3 div {
  width: 170px;
  height: 25px;
}

.box3 div span {
  line-height: 25px;
  font-size: 18px;
  display: block;

}


.samllBox .l2 {
  font-size: 18px;
  color: red;
  display: block;
  margin-left: 80px;
}

.box4 {
  margin-top: 10px;
  display: flex;
}

.tp {
  width: 120px;
  height: 100px;
  margin-top: 20px;
  margin-left: 10px;
}

.tp2 {
  margin-top: 20px;
  width: 220px;
  height: 100px;
}

.tp2 li {
  font-size: 16px;
  color: #7f7d7d;
}

.tp2 .l1 {
  margin-top: 8px;
  font-size: 14px;
  color: #b9b8b8;
}</style>